import React from 'react';
import { Form, Input, Button, } from 'antd';

import {ProBox} from '@yaf/pro-ui';
import { usePersonInfo } from './usePersonInfo';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 14,
    },
  },
};

const PersonInfo: React.FC = () => {
  const { form, saving, submit, loginUserInfo, loading } = usePersonInfo()

  return <ProBox loading={loading}>
    <Form
      {...formItemLayout}
      form={form}
      scrollToFirstError
      initialValues={{
        nickName: loginUserInfo?.user?.userNickname,
        userEmail: loginUserInfo?.user?.userEmail,
        mobile: loginUserInfo?.user?.mobile,
      }}
    >
      <Form.Item
        name="nickName"
        label="昵称"
        rules={[
          {
            required: true,
            message: '请输入昵称!',
          },
        ]}
        hasFeedback
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="userEmail"
        label="邮箱"
        hasFeedback
        rules={[
          {
            required: true,
            message: '请输入邮箱地址!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="mobile"
        label="手机号"
        hasFeedback
        rules={[
          {
            required: true,
            message: '请输入手机号!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button loading={saving} type="primary" onClick={submit}>
          修改
        </Button>
      </Form.Item>
    </Form>
  </ProBox>
}

export default PersonInfo
